<template>
  <scroll-view scroll-y="true" class="van-list scroll-Y" @scrolltolower="lower">
    <slot/>
    <uni-load-more :status="more" :content-text="contentText" @clickLoadMore="lower"></uni-load-more>
  </scroll-view>
</template>

<script setup>
import {ref, watch, onMounted, computed} from 'vue';

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  finished: {
    type: Boolean,
    default: false
  },
  finishedText: {
    type: String,
    default: ''
  },
  immediateCheck: {
    type: Boolean,
    default: true
  }
});

const emit = defineEmits(['load']);

const more = ref('more');

watch(() => props.finished, (val) => {
  if (val) {
    more.value = 'noMore';
  } else if (props.modelValue) {
    more.value = 'loading';
  } else {
    more.value = 'more';
  }
});

watch(() => props.modelValue, (val) => {
  if (props.finished) {
    more.value = 'noMore';
  } else if (val) {
    more.value = 'loading';
  } else {
    more.value = 'more';
  }
});

const contentText = computed(() => ({
  contentdown: '查看更多',
  contentrefresh: '加载中...',
  contentnomore: props.finishedText || '没有更多了'
}));

const lower = () => {
  if (!props.finished && !props.modelValue) {
    emit('load');
  }
};
</script>

<style lang="scss" scoped>
.scroll-Y {
  position: relative;
  //height: calc(100vh - 420px);
  padding-top: 5px;
}
</style>